<template>
  <!-- 分页功能 -->
  <!-- size-change监听 pagesize改变的事件,每页显示多少条数据 -->
  <!-- current-change监听 页码值 改变的事件,当前第几页 -->
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="queryInfo.pagenum"
    :page-sizes="[2, 3, 5, 10]"
    :page-size="queryInfo.pagesize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="totalNum"
  >
  </el-pagination>
</template>

<script>
export default {
  name: "Pagination",
  props: ["queryInfo", "totalNum"],
  methods: {
    // 监听 pagesize改变的事件,每页显示多少条数据
    handleSizeChange(newSize) {
      this.queryInfo.pagesize = newSize;
      // 刷新页面
      this.$emit("getPageNo", this.queryInfo);
    },
    // 监听 页码值 改变的事件,当前第几页
    handleCurrentChange(newPage) {
      this.queryInfo.pagenum = newPage;
      // 刷新页面
      this.$emit("getPageNo", this.queryInfo);
    },
  },
};
</script>

<style lang="less" scoped>
// 分页功能
.el-pagination {
  margin-top: 10px;
}
</style>
